import React from 'react';
import {
    TabNavigator,
    StackNavigator,
} from 'react-navigation';
import { Icon } from 'react-native-elements';
import Home      from '../screen/Home';
import Detail    from '../screen/Detail';
import My        from '../screen/My';
import Set        from '../screen/Set';

export const HomeStack = StackNavigator({
    Home:{
        screen:Home,
        navigationOptions:{
            title:'List'
        }
    },
    Detail:{
        screen:Detail,
        navigationOptions:({navigation})=>({
            title: `${navigation.state.params.name.first.toUpperCase()} ${navigation.state.params.name.last.toUpperCase()}`
        })
    },
})

export const  Tabs = TabNavigator({
    Home:{
        screen:HomeStack,
        navigationOptions:{
            tabBarLabel:'首页',
            tabBarIcon:({tintColor})=><Icon name="list" size={35} color={tintColor}/>
        }
    },
    My:{
        screen:My,
        navigationOptions:{
            tabBarLabel:'我的',
            tabBarIcon:({tintColor})=><Icon name="list" size={35} color={tintColor}/>
        }
    },
})

export const SetStack = StackNavigator({
    Set: {
        screen: Set,
        navigationOptions: {
            title: '设置',
        },
    },
});


export const Root = StackNavigator({
    Tabs: {
        screen: Tabs
    },
    Set:{
        screen:SetStack
    }
},{
    mode:'modal',
    headerMode:'none'
});
